@keyframes toc-appear
  from
    opacity 0
  to
    opacity 1

.p-toc
  overflow hidden
  user-select none
  width $aside_width - $gap * 8
  margin $gap * 4
  border-radius $gap * 0.5
  border 1px solid var(--color-clear)
  background var(--color-background)
  white-space normal
  animation toc-appear 0.6s ease

.p-toc-caption
  padding 0 $gap
  font-size 0.8em
  line-height 2.5
  background var(--color-clear)
  i
    margin-right $gap * 0.5

.p-toc-main
  padding $gap * 1.5
  font-size 0.88em
  @media (min-width: $app_mobile_width_min)
    max-height s('calc(100vh - 5.5em - %s - %s)', $gap * 8 + 3px, $progress_height)
    overflow-y auto
    &::-webkit-scrollbar
      width $gap
    &::-webkit-scrollbar-thumb
      background var(--color-text)

.p-toc-list
  pointer-events none
  ol
    list-style none
  a
    pointer-events all
    display block
    margin 0 $gap * -1.5
    padding 0 $gap * 1.5
    color var(--color-toc-link)
    white-space nowrap
    text-overflow ellipsis
    overflow-x hidden
    @media (min-width: $app_mobile_width_min)
      &:hover
        background var(--color-clear)
      &.active
        background var(--color-toc-active-background)
        color var(--color-toc-active-text)

@media (max-width: $app_mobile_width)
  .p-toc
    width 100%
    margin 0
    border none
    border-bottom 1px solid var(--color-clear)
    border-radius 0
  .p-toc-caption
    text-align center
    i
      display none
  .p-toc-message
    text-align center
    font-size 0.88em